<template>
  <div>
    <div class="app-page">
      <org-tree
        class="orgTree"
        title="组织机构"
        :tree-data="orgTreeData"
        :mouse-button="false"
        :loading="$loadingPlugin.getData"
        @currentChange="orgChange"
      />
      <div class="main-config">
        <el-tabs ref="stationRef" v-model="tabName" type="card" @tab-click="handleClick">
          <el-tab-pane v-if="$hasTabPermission(110201)" label="配置项" name="station">
            <station ref="station" />
          </el-tab-pane>
          <el-tab-pane v-if="$hasTabPermission(110202)" label="瓶数配置" name="bottlesConfig">
            <bottlesConfig ref="bottlesConfig" :current-org="currentOrg" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { organizationQueryList } from '@/api'
  import { parseTime } from '@/utils'
  import getTreeData from '@/utils/jsonTree'
  import OrgTree from '@/views/components/OrgTree'
  import bottlesConfig from './bottlesConfig/index'
  import station from './station/index'

  export default {
    name: 'stationConfig',
    components: {
      OrgTree,
      bottlesConfig,
      station
    },
    data() {
      return {
        parseTime,
        orgTreeData: [],
        currentOrg: null,
        tabName: 'bottlesConfig'
      }
    },
    created() {
      this.getData()
    },
    mounted() {
      this.tabName = this.$refs.stationRef.panes[0].name
    },
    methods: {
      // 获取组织机构数据
      async getData() {
        const res = await organizationQueryList({})
        const data = res.data.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.orgTreeData = getTreeData(data)
      },
      // 选择组织机构变化
      orgChange(current) {
        this.currentOrg = current
        this.$refs[this.tabName].getConfigData(this.currentOrg)
      },
      handleClick() {
        this.$refs[this.tabName].getConfigData(this.currentOrg)
      }

    }
  }
</script>

<style lang='scss' scoped>
.app-page {
  display: flex;
  width: 100%;
  height: calc(100vh - 175px);
  padding: 0;

  .main-config {
    flex: 1;
  }
  /deep/ .el-divider--horizontal {
    margin: 8px 0;
  }
}
</style>
